<html>

<head>
    <title>Login</title>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
</head>

<body>

    <div>
        username:
        <input type="text" id="username" />
    </div>
    <div>
        password:
        <input type="text" id="password" />
    </div>

    <div>
        <input type="button" id="loginButton" value="login" />
    </div>

    <script type="text/javascript">
        $(document).ready(function () {
            $("#loginButton").click(function () {
                login();
            });
        });

        function login() {
            var username = $("#username").val();
            var password = $("#password").val();

            $.ajax({
                type: "post",
                //index.php?s=/Blog/Index/login.html
                url: "{:U('login')}",
                data: {
                    username: username,
                    password: password
                },
                success: function (response) {
                    //alert(JSON.stringify(response));
                    const code = response.code;
                    if (code === 0) {
                        window.location = "{:U('index')}";
                        //正常执行，成功登陆
                    } else {
                        //表明出错,显示错误信息
                        alert(response.message);
                    }
                },
                error: function (response) {
                    alert(JSON.stringify(response));
                }
            });
        }
    </script>
</body>

</html>